<template>
	<section class="panel">
		<div class="panel-header">
			<h3>Embed</h3>
		</div>
		<p class="desc">If you want to use this map on your site, just click on the button below to copy a line of code, paste it on your site, and use it.</p>
		<button class="btn" @click="onClick">{{ copied ? 'Copied' : 'Click To Copy Code' }}</button>
	</section>
</template>

<script>
export default {
	name: 'EmbedPanel',
	data() {
		return { copied: false }
	},
	methods: {
		onClick() {
			this.copied = true
			setTimeout(() => { this.copied = false }, 1200)
		}
	}
}
</script>

<style scoped>
.panel { padding: 12px; border-bottom: 1px solid #eee; }
.panel-header { display: flex; align-items: center; justify-content: space-between; }
.desc { color: #444; font-size: 13px; }
.btn { margin-top: 8px; padding: 8px 12px; border: 1px solid #eadcc7; background: #f7f2ea; color: #5f503d; border-radius: 8px; cursor: pointer; }
.btn:active { background: #efe7da; }
</style> 